<template>
  <page-header-wrapper>
    <a-card>
      <a-form>
        <a-form-item>
          <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
          <a-button style="margin-left:20px;" type="primary" @click="query">查询</a-button>
          <a-button v-action:add style="margin-left:50%" type="primary" @click="create">新增项目</a-button>
        </a-form-item>
      </a-form>

      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        @change="sorterFun"
        :scroll="{ y: 400 }"
      >
        <span slot="applyDate" slot-scope="applyDate"> {{ humanizeDate(applyDate) }}</span>
        <span slot="approve" slot-scope="_, record">
          <apprDialog :record="record" @update="getData(current)"></apprDialog>
        </span>
        <span slot="history" slot-scope="_, record">
          <ListHistory :record="record" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)" v-action:get class="mr-2">查看</a>
          <!-- <a-divider type="vertical" v-action:get /> -->
          <a-popconfirm title="确定删除吗" @confirm="() => onDelete(record.id)">
            <a href="javascript:;" v-action:delete v-if="record.Archive == 0">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getProject, deleteProjectById } from '@/api/common'
import moment from 'moment'
const columns = [
  { dataIndex: 'projectNum', key: 'projectNum', title: '项目编号' },
  {
    dataIndex: 'addr',
    key: 'addr',
    title: '项目地址',
    sorter: true,
    sortDirections: ['ascend']
  },
  { dataIndex: 'clientName', key: 'clientName', title: '客户名称', sorter: true, sortDirections: ['ascend'] },
  { dataIndex: 'sysUserName', key: 'sysUserName', title: '贷款顾问', sorter: true, sortDirections: ['ascend'] },
  {
    dataIndex: 'applyDate',
    key: 'applyDate',
    title: '申请日期',
    scopedSlots: { customRender: 'applyDate' },
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    dataIndex: 'approve',
    key: 'approve',
    title: '批准',
    scopedSlots: { customRender: 'approve' },
    filters: [
      {
        text: '待审批',
        value: 1
      },
      {
        text: '批准',
        value: 2
      },
      {
        text: '拒绝',
        value: 3
      }
    ],
    filterMultiple: false
    // onFilter: (value, record) => record.approve == value
  },
  { dataIndex: 'history', key: 'history', title: '历史记录', scopedSlots: { customRender: 'history' } }
  // { dataIndex: 'operation', key: 'operation', title: '操作', scopedSlots: { customRender: 'operation' } }
]

export default {
  name: 'Project',
  components: {
    apprDialog: () => import('./com/apprDialog.vue'),
    ListHistory: () => import('./com/ListHistory.vue')
  },
  data() {
    return {
      keyWord: '',
      columnKey: '',
      approve: '',
      data: [],
      current: 1,
      pagination: {
        total: 1,
        pageSize: 10
        // onChange: this.getData
      },
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'clientName', value: 2 },
        { text: 'sysUserName', value: 3 },
        { text: 'applyDate', value: 4 }
      ]
    }
  },
  computed: {
    columns() {
      if (this.$auth('busProject.update') || this.$auth('busProject.delete')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    query() {
      this.getData()
    },
    toDetail(record) {
      this.$router.push({ name: 'business/detail', query: { id: record.id, approve: record.approve } })
    },
    async onDelete(id) {
      await deleteProjectById(id)
      this.$message.info('已删除')
      this.getData(this.current)
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    sorterFun(pagination, filters, sorter) {
      // console.log(filters)
      this.approve = filters.approve?.[0] ? filters.approve?.[0] : ''
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData(pagination.current)
    },
    async getData(page = 1) {
      this.current = page
      var _form = {
        page,
        limit: this.pagination.pageSize,
        dataType: 1
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      if (this.columnKey) {
        _form.orderType = this.columnKey
      }
      if (this.approve) {
        _form.approve = this.approve
      }
      const res = await getProject(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        el.index = i
        return el
      })
    },
    create() {
      this.$router.push('/business/project/detail')
    }
  }
}
</script>
<style scoped>
.body {
  width: 100%;
  height: 100vh;
  margin: 10px;
  padding: 15px;
  background: #ffffff;
}
</style>
